<template>
  <div id="tags" class="indexDiv m-padded-tb-large" style="">
    <!--顶部图片-->
    <div style="margin-top: -30px">
      <!--页面首图-->
      <div class="blog_first_picture">
        <img src="../../assets/img/tag.jpg" alt="标签首图" />
      </div>
    </div>

    <!--页面首图上的文字-->
    <div style="margin-top: -280px">
      <h2 style="font-family: STSong; font-size: 45px; font-weight: 900; color: #ffffff;" align="center" >文章标签</h2>
      <div class="ui container" align="center" style="margin-top: 20px">
        <div class="ui horizontal link list" align="center">
          <div class="item">
            <div class="ui orange basic label" style="font-size: 15px">{{ tagBlogCountList.length }}个</div>
          </div>
        </div>
      </div>
    </div>

    <div style="margin-top: 30px; margin-bottom: 60px; padding: 0 420px;">
      <div class="m-border">

        <!-- 标签框 -->
        <div class="m-about-module-bottom">
          <div class="m-about-module">
            <a
               v-for="(tagBlogCount, index) in tagBlogCountList" :key="tagBlogCount.tagId"
               @click="getBlogByTagId(tagBlogCount.tagId, index)"
               :class="isActive == index ? 'add_style' : ''"
               class="ui teal basic left pointing label m-margin-tb-tiny m-border">
              {{ tagBlogCount.tagName }}
              <div class="detail" >{{ tagBlogCount.blogCount }}</div>
            </a>
          </div>
        </div>
      </div>

      <!-- 博客列表 -->
      <div id="blogListDiv" class="m-border" style="background:rgba(255,255,255,0.7); margin-bottom: 50px; margin-top: 25px;">

        <!-- 博文 -->
        <div class="blogItemBottomDiv" v-for="(blog, index) in blogs" :key="blog.id">
          <div class="blogItemDive" style="margin-bottom: 27px">
            <el-row>
              <!-- 文章内容 -->
              <el-col :span="17">
                <div style="margin-left: 20px">
                  <h3 style="margin-top: 0px; cursor:pointer;" @click="toBlogInfo(blog.id)">{{ blog.title }}</h3>
                  <p class="m-text">{{ blog.description }}</p>
                  <div>
                    <el-row>
                      <el-col :span="17">
                        <div>
                          <div style="float: left"><el-avatar shape="circle" size="small" :src="blog.avatar" alt="头像"></el-avatar></div>
                          <div style="float: left; margin-top: 1px;"><el-link href="#/aboutMe" :underline="false" style="color: #0758F8; font-weight: 600; margin-left: 7px">{{ blog.nickname }}</el-link></div>
                          <div style="float: left; margin-left: 15px; margin-top: 4px; font-size: 15px; color: #bbbbbb;"><i class="el-icon-date">&nbsp;{{ blog.updateTime | dateFormat('YYYY-MM-DD HH:mm') }}</i></div>
                          <div style="float: left; margin-left: 12px; margin-top: 4px; font-size: 15px; color: #bbbbbb;"><i class="el-icon-view">&nbsp;{{ blog.views }}</i></div>
                        </div>
                      </el-col>

                      <el-col :span="7">
                        <el-button class="m-text-thin m-padded-tiny"
                                   @click="toTypeInfo(blog.typeId)"
                                   plain size="medium"
                                   style="border-color: #07f686; float: right; color: #08BF6A;">
                          {{ blog.typeName }}
                        </el-button>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </el-col>

              <!-- 图片 -->
              <el-col :span="7">
                <div style="margin-right: 15px; margin-top: 10px" align="right">
                  <el-link :underline="false">
                    <img @click="toBlogInfo(blog.id)"
                         :src="blog.firstPicture" alt="博客首图"
                         style="border-radius: 5px" width="80%" height="120vw">
                  </el-link>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>

        <!--  分页  -->
        <div class="page_index" style="margin-left: 20px; margin-top: 10px; margin-bottom: 10px">
          <div>
            <div style="float: left">
              <el-pagination
                background
                prev-text="上一页"
                next-text="下一页"
                layout="prev, pager, next, jumper, total"
                :page-size="size"
                :current-page="pageNow"
                :page-sizes="[2,4,6,8,10]"
                @current-change="findPage"
                @size-change="findSize"
                :total="total">
              </el-pagination>
            </div>
            <div style="clear: both"></div> <!--在 .head div 最后补一个空DIV 清除浮动-->
          </div>
        </div>
      </div>


    </div>
  </div>
</template>

<script>
export default {
  name: "Tags",
  data() {
    return {
      isActive: 0,
      id: -1,
      tagBlogCountList: [],
      blogs: [],
      total: 0,
      size: 2,
      pageNow: 1
    };
  },
  methods:{
    // 查询标签对应博客数量列表
    getTagBlogCountList(){
      this.$http.get("http://localhost:8088/show/tags/blogCount").then(res => {
        if (res.data.code == 0) { // 成功
          this.tagBlogCountList = res.data.data;
        }
      });
    },
    // 用来处理每页显示记录发生变化的方法
    findSize(size) {
      // console.log(size);
      this.size = size;
      this.showBlogByTagId(this.page,size);
    },
    // 用来处理分页相关方法
    findPage(page) {
      // console.log(page)
      this.page = page;
      this.showBlogByTagId(page, this.size);
    },
    // 根据标签id获取博客列表
    showBlogByTagId(page, size){
      page = page ? page : this.pageNow,
        size = size ? size : this.size;
      this.$http.post("http://localhost:8088/show/blogs/byTag/"+this.id,{
        pageNum:page,
        pageSize:size
      }).then(res => {
        if (res.data.code == 0) { // 成功
          this.blogs = res.data.data;
          this.total = res.data.total;
          // console.log(this.blogs);
        }
      });
    },
    // 点击标签按钮查询对应博客
    getBlogByTagId(tagId, index){
      this.id = tagId;
      this.isActive = index;
    },
    // 跳转至博客详情页面
    toBlogInfo(id){
      let routeData = this.$router.resolve({ // 路由跳转并传参
        name:'blog',
        query:{
          id:id //博客id
        },
      });
      window.open(routeData.href, '_blank');
    },
    // 跳转至分类页面
    toTypeInfo(id){
      this.$router.push({ // 路由跳转并传参
        name:'types',
        params:{
          id:id //博客id
        },
      });
    },
  },
  created() {
    this.getTagBlogCountList();// 标签对应博客数量列表
    if (this.$route.params.id != null){ // 获取路由传值
      this.id = this.$route.params.id; // 路由获取值改变id
    }
    if (this.$route.params.index != null){ // 获取路由传值
      this.isActive = this.$route.params.index; // 路由获取值改变isActive
    }
  },
  watch: {
    tagBlogCountList() {
      if (this.id == -1){ // id为-1，表示id没有变，即没有路由传参，那么默认以第一个标签查询
        this.id = this.tagBlogCountList[0].tagId;
        this.showBlogByTagId();
      }
    },
    id(){ // id变化，路由传参或点击按钮传参导致id变化
      // alert(this.id);
      this.showBlogByTagId();
    }
  },
}


</script>

<style scoped>
#tags{

}
.m-about-module-bottom{
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #bbbbbb;
}

.m-about-module{
  width: 95%;
  margin: 0 auto;
}

/* 点击标签添加样式 */
.add_style{
  background-color: #fae7e7!important;
  font-size: 20px;
  color: red!important;
  border: 3px solid red!important;
  border-radius: 30px;
}
</style>
